<style scoped>
/* 地图【firstShow】 or 工厂平面图【secondShow】 or 楼层平面图【thirdShow】 */

.firstShow {
  transform: translateX(0);
  transition: transform .6s;
}
.secondShow {
  transform: translateX(-33.33%);
  transition: transform .6s;
}
.thirdShow {
  transform: translateX(-66.66%);
  transition: transform .6s;
}
.pageContain {
  display: flex;
}
.leftContain {
  flex: 1;
  overflow: hidden;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 4px;
}
.leftDiv {
  width: 300%;
  display: flex;
}
.mapContain {
  height: 600px;
  flex: 1;
}
.factoryContain {
  height: 600px;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.backBtnContain {
  position: absolute;
  top: 10px;
  left: 10px;
}
.factoryImg {
  max-height: 800px;
  cursor: pointer;
}
.floorContain {
  height: 600px;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.middleContain {
  flex: 0 0 10px;
}
.rightContain {
  flex: 0 0 300px;
  background: #fff;
  border-radius: 4px;
}
.rightTab2Contain {
  padding: 0 6px;
}
.rightTab2Title {
  color: #aaa;
  padding-left: 20px;
  font-size: 16px;
}
.rightTab2Total {
  font-size: 30px;
  text-align: center;
}
.rightTab2Statistic {
  display: flex;
  text-align: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.rightTab2StatisticItem {
  flex: 1;
}
.grey {
  color: grey;
}
.fontSize16 {
  font-size: 16px;
}

/* 右边数据 */

.rightFactoryData {
  display: flex;
}
.rightFactoryDataIndex {
  flex: 1;
  line-height: 36px;
}
.rightFactoryDataName {
  flex: 1;
  line-height: 36px;
}
.rightFactoryDataPercent {
  flex: 4;
  display: flex;
}
.percentContain {
  flex: 0 0 41px;
  line-height: 36px;
}
.progressContain {
  flex: 1;
  font-size: 10px;
}
.progressContainOn {
  height: 15px;
  vertical-align: top;
}
.progressContainOff {
  height: 15px;
  vertical-align: top;
  margin-top: -8px;
}
.rightFactoryDataNumber {
  flex: 2;
  text-align: right;
}
.floorDataContain {
  position: relative;
}
.floorDataItem {
  float: left;
  margin: 2px;
  width: 140px;
  border: 1px solid #eee;
  border-radius: 6px;
}

</style>
<template>
  <div class="pageContain">
    <!-- 左边 -->
    <div class="leftContain">
      <div :class="[detailObj.cssClass, 'leftDiv']">
        <!-- 地图 -->
        <div id="idMapWrap" class="mapContain"></div>
        <!-- 工厂平面图 -->
        <div class="factoryContain">
          <div class="backBtnContain">
            <Button type="warning" shape="circle" icon="ios-arrow-back" @click="backClick(2)"></Button>
          </div> <img :src="imgObj.factory" alt="" class="factoryImg" @click="workshopClick()"> </div>
        <!-- 楼层平面图 -->
        <div class="floorContain">
          <div class="backBtnContain">
            <Button type="warning" shape="circle" icon="ios-arrow-back" @click="backClick(3)"></Button>
          </div> <img :src="imgObj.floor" alt="" style="max-height:800px;" @click="devClick()"> <img :src="imgObj.devVedio" alt="" style="max-height:100px;" v-show="showDev"> </div>
      </div>
    </div>
    <div class="middleContain">
      <!-- 间隔占位 -->
    </div>
    <!-- 右边 -->
    <div class="rightContain">
      <Tabs value="name2">
        <TabPane label="区域概况" name="name1">区域概况的内容</TabPane>
        <TabPane name="name2" :label="label">
          <div class="rightTab2Contain">
            <div class="rightTab2Title">设备总数</div>
            <div class="rightTab2Total">{{numberShow(showStatisticObj.total)}}</div>
            <div class="rightTab2Statistic">
              <div class="rightTab2StatisticItem">
                <div class="grey">
                  <Icon type="record" color="#2db7f5" size="12"></Icon> &nbsp;&nbsp;在线 </div> <span class="fontSize16">{{numberShow(showStatisticObj.onlines)}}</span> </div>
              <div class="rightTab2StatisticItem">
                <div class="grey">
                  <Icon type="record" color="#ed3f14" size="12"></Icon> &nbsp;&nbsp;停用 </div> <span class="fontSize16">{{numberShow(showStatisticObj.offlines)}}</span> </div>
            </div>
            <!-- 工厂列表 -->
            <div v-show="detailObj.currentIndex == 1">
              <div style="display:flex;color:#bbb;">
                <div style="flex:1;">排名</div>
                <div style="flex:1;">工厂</div>
                <div style="flex:4;">占比</div>
                <div style="flex:2;text-align:right;">数量</div>
              </div>
              <div class="rightFactoryData" v-for="(item,index) in factoryData" :key="'f'+index">
                <div class="rightFactoryDataIndex">{{index+1}}</div>
                <div class="rightFactoryDataName"><span style="cursor:pointer;" @click="itemNameClick(2,item.name)">{{item.name}}</span></div>
                <div class="rightFactoryDataPercent">
                  <div class="percentContain">{{item.percent}}</div>
                  <div class="progressContain">
                    <Progress :percent="(item.onlines/item.total).toFixed(2)*100" hide-info class="progressContainOn"></Progress>
                    <Progress :percent="(item.offlines/item.total).toFixed(2)*100" status="wrong" hide-info class="progressContainOff"></Progress>
                  </div>
                </div>
                <div class="rightFactoryDataNumber">
                  <div style="color:#2db7f5;"> {{numberShow(item.onlines)}}
                    <Icon type="record" color="#2db7f5" size="8"></Icon>
                  </div>
                  <div style="color:#ed3f14;"> {{numberShow(item.offlines)}}
                    <Icon type="record" color="#ed3f14" size="8"></Icon>
                  </div>
                </div>
              </div>
            </div>
            <!-- 工厂平面图 -->
            <div v-show="detailObj.currentIndex == 2">
              <div style="display:flex;color:#bbb;">
                <div style="flex:1;">排名</div>
                <div style="flex:1;">车间</div>
                <div style="flex:4;">占比</div>
                <div style="flex:2;text-align:right;">数量</div>
              </div>
              <div class="rightFactoryData" v-for="(item,index) in workshopData" :key="'w'+index">
                <div class="rightFactoryDataIndex">{{index+1}}</div>
                <div class="rightFactoryDataName"><span style="cursor:pointer;" @click="itemNameClick(3,item.name)">{{item.name}}</span></div>
                <div class="rightFactoryDataPercent">
                  <div class="percentContain">{{item.percent}}</div>
                  <div class="progressContain">
                    <Progress :percent="(item.onlines/item.total).toFixed(2)*100" hide-info class="progressContainOn"></Progress>
                    <Progress :percent="(item.offlines/item.total).toFixed(2)*100" status="wrong" hide-info class="progressContainOff"></Progress>
                  </div>
                </div>
                <div class="rightFactoryDataNumber">
                  <div style="color:#2db7f5;"> {{item.onlines}}
                    <Icon type="record" color="#2db7f5" size="8"></Icon>
                  </div>
                  <div style="color:#ed3f14;"> {{item.offlines}}
                    <Icon type="record" color="#ed3f14" size="8"></Icon>
                  </div>
                </div>
              </div>
            </div>
            <!-- 楼层平面图 -->
            <div v-show="detailObj.currentIndex == 3">
              <div style="display:flex;">
                <div style="flex:1;line-height:50px;text-align:center;">
                  <Button type="primary" shape="circle">上一页</Button>
                </div>
                <div style="flex:1;line-height:50px;text-align:center;">
                  <Button type="primary" shape="circle">下一页</Button>
                </div>
              </div>
              <div class="floorDataContain">
                <div class="floorDataItem" v-for="(item,index) in floorData" :key="'floor'+index">
                  <div style="color:#bbb;padding:10px 0 0 10px;">
                    <Icon type="record" color="#2d8cf0" size="12"></Icon>在线</div>
                  <div style="padding:2px 10px;">数据1：xxxx</div>
                  <div style="padding:2px 10px;">数据1：xxxx</div>
                  <div style="text-align:center;color:#bbb;border-top:1px solid #eee;line-height:30px;">冲压1号摄像</div>
                </div>
              </div>
            </div>
            <!-- 楼层平面图 -->
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
import 'echarts/map/js/china.js'
export default {
  data: function () {
    return {
      mapChart: null,
      imgObj: {
        factory: require('../../assets/factory2.png'),
        floor: require('../../assets/chejian.png'),
        devVedio: require('../../assets/dev_vedio.png')
      },
      showDev: false,
      detailObj: {
        cssClass: 'firstShow',
        currentIndex: 1
      },
      showStatisticObj: {
        total: '',
        onlines: '',
        offlines: ''
      },
      label: (h) => {
        return h('div', [
          h('span', '报警情况'),
          h('Badge', {
            /* props: {
              count: 3
            } */
          })
        ])
      },
      factoryData: [],
      workshopData: [],
      floorData: [{
        factory: 'HD1',
        percent: '35%',
        online: 14432,
        stop: 1786
      }, {
        factory: 'HD2',
        percent: '35%',
        online: 14432,
        stop: 1786
      }, {
        factory: 'DL',
        percent: '35%',
        online: 14432,
        stop: 1786
      }, {
        factory: 'ZZ',
        percent: '35%',
        online: 14432,
        stop: 1786
      }, {
        factory: 'YY',
        percent: '35%',
        online: 14432,
        stop: 1786
      }]
    }
  },
  created: function () {},
  mounted: function () {
    let self = this
    self.mapChart = self.$echarts.init(document.getElementById('idMapWrap'))
    self.list(1, '')
    // self.oneEchartInit()
    window.onresize = function () {
      self.mapChart.resize()
    }
    // 左边菜单折叠时触发
    window.vm.$on('iconRotateClick', function (data) {
      setTimeout(function () {
        self.mapChart.resize()
      }, 600)
    })
  },
  destroyed: function () {
    window.onresize = null
    this.mapChart = null
  },
  methods: {
    show: function (index) {
      this.$Modal.info({
        title: '信息',
        content: `类型：${this.data6[index].type}<br>品牌：${this.data6[index].brand}<br>频率：${this.data6[index].frequency}`
      })
    },
    remove: function (index) {
      this.data6.splice(index, 1)
    },
    oneEchartInit: function (chartData) {
      let self = this
      self.mapChart.showLoading({ text: '' })
      /* var geoCoordMap = {
        '海门': [121.15, 31.89],
        '鄂尔多斯': [109.781327, 39.608266],
        '招远': [120.38, 37.35],
        '舟山': [122.207216, 29.985295],
        '齐齐哈尔': [123.97, 47.33],
        '盐城': [120.13, 33.38],
        '赤峰': [118.87, 42.28],
        '青岛': [120.33, 36.07],
        '乳山': [121.52, 36.89],
        '金昌': [102.188043, 38.520089],
        '泉州': [118.58, 24.93],
        '莱西': [120.53, 36.86],
        '日照': [119.46, 35.42],
        '胶南': [119.97, 35.88],
        '南通': [121.05, 32.08],
        '拉萨': [91.11, 29.97],
        '云浮': [112.02, 22.93],
        '梅州': [116.1, 24.55],
        '文登': [122.05, 37.2],
        '上海': [121.48, 31.22],
        '攀枝花': [101.718637, 26.582347],
        '威海': [122.1, 37.5],
        '承德': [117.93, 40.97],
        '厦门': [118.1, 24.46],
        '汕尾': [115.375279, 22.786211],
        '潮州': [116.63, 23.68],
        '丹东': [124.37, 40.13],
        '太仓': [121.1, 31.45],
        '曲靖': [103.79, 25.51],
        '烟台': [121.39, 37.52],
        '福州': [119.3, 26.08],
        '瓦房店': [121.979603, 39.627114],
        '即墨': [120.45, 36.38],
        '抚顺': [123.97, 41.97],
        '玉溪': [102.52, 24.35],
        '张家口': [114.87, 40.82],
        '阳泉': [113.57, 37.85],
        '莱州': [119.942327, 37.177017],
        '湖州': [120.1, 30.86],
        '汕头': [116.69, 23.39],
        '昆山': [120.95, 31.39],
        '宁波': [121.56, 29.86],
        '湛江': [110.359377, 21.270708],
        '揭阳': [116.35, 23.55],
        '荣成': [122.41, 37.16],
        '连云港': [119.16, 34.59],
        '葫芦岛': [120.836932, 40.711052],
        '常熟': [120.74, 31.64],
        '东莞': [113.75, 23.04],
        '河源': [114.68, 23.73],
        '淮安': [119.15, 33.5],
        '泰州': [119.9, 32.49],
        '南宁': [108.33, 22.84],
        '营口': [122.18, 40.65],
        '惠州': [114.4, 23.09],
        '江阴': [120.26, 31.91],
        '蓬莱': [120.75, 37.8],
        '韶关': [113.62, 24.84],
        '嘉峪关': [98.289152, 39.77313],
        '广州': [113.23, 23.16],
        '延安': [109.47, 36.6],
        '太原': [112.53, 37.87],
        '清远': [113.01, 23.7],
        '中山': [113.38, 22.52],
        '昆明': [102.73, 25.04],
        '寿光': [118.73, 36.86],
        '盘锦': [122.070714, 41.119997],
        '长治': [113.08, 36.18],
        '深圳': [114.07, 22.62],
        '珠海': [113.52, 22.3],
        '宿迁': [118.3, 33.96],
        '咸阳': [108.72, 34.36],
        '铜川': [109.11, 35.09],
        '平度': [119.97, 36.77],
        '佛山': [113.11, 23.05],
        '海口': [110.35, 20.02],
        '江门': [113.06, 22.61],
        '章丘': [117.53, 36.72],
        '肇庆': [112.44, 23.05],
        '大连': [121.62, 38.92],
        '临汾': [111.5, 36.08],
        '吴江': [120.63, 31.16],
        '石嘴山': [106.39, 39.04],
        '沈阳': [123.38, 41.8],
        '苏州': [120.62, 31.32],
        '茂名': [110.88, 21.68],
        '嘉兴': [120.76, 30.77],
        '长春': [125.35, 43.88],
        '胶州': [120.03336, 36.264622],
        '银川': [106.27, 38.47],
        '张家港': [120.555821, 31.875428],
        '三门峡': [111.19, 34.76],
        '锦州': [121.15, 41.13],
        '南昌': [115.89, 28.68],
        '柳州': [109.4, 24.33],
        '三亚': [109.511909, 18.252847],
        '自贡': [104.778442, 29.33903],
        '吉林': [126.57, 43.87],
        '阳江': [111.95, 21.85],
        '泸州': [105.39, 28.91],
        '西宁': [101.74, 36.56],
        '宜宾': [104.56, 29.77],
        '呼和浩特': [111.65, 40.82],
        '成都': [104.06, 30.67],
        '大同': [113.3, 40.12],
        '镇江': [119.44, 32.2],
        '桂林': [110.28, 25.29],
        '张家界': [110.479191, 29.117096],
        '宜兴': [119.82, 31.36],
        '北海': [109.12, 21.49],
        '西安': [108.95, 34.27],
        '金坛': [119.56, 31.74],
        '东营': [118.49, 37.46],
        '牡丹江': [129.58, 44.6],
        '遵义': [106.9, 27.7],
        '绍兴': [120.58, 30.01],
        '扬州': [119.42, 32.39],
        '常州': [119.95, 31.79],
        '潍坊': [119.1, 36.62],
        '重庆': [106.54, 29.59],
        '台州': [121.420757, 28.656386],
        '南京': [118.78, 32.04],
        '滨州': [118.03, 37.36],
        '贵阳': [106.71, 26.57],
        '无锡': [120.29, 31.59],
        '本溪': [123.73, 41.3],
        '克拉玛依': [84.77, 45.59],
        '渭南': [109.5, 34.52],
        '马鞍山': [118.48, 31.56],
        '宝鸡': [107.15, 34.38],
        '焦作': [113.21, 35.24],
        '句容': [119.16, 31.95],
        '北京': [116.46, 39.92],
        '徐州': [117.2, 34.26],
        '衡水': [115.72, 37.72],
        '包头': [110, 40.58],
        '绵阳': [104.73, 31.48],
        '乌鲁木齐': [87.68, 43.77],
        '枣庄': [117.57, 34.86],
        '杭州': [120.19, 30.26],
        '淄博': [118.05, 36.78],
        '鞍山': [122.85, 41.12],
        '溧阳': [119.48, 31.43],
        '库尔勒': [86.06, 41.68],
        '安阳': [114.35, 36.1],
        '开封': [114.35, 34.79],
        '济南': [117, 36.65],
        '德阳': [104.37, 31.13],
        '温州': [120.65, 28.01],
        '九江': [115.97, 29.71],
        '邯郸': [114.47, 36.6],
        '临安': [119.72, 30.23],
        '兰州': [103.73, 36.03],
        '沧州': [116.83, 38.33],
        '临沂': [118.35, 35.05],
        '南充': [106.110698, 30.837793],
        '天津': [117.2, 39.13],
        '富阳': [119.95, 30.07],
        '泰安': [117.13, 36.18],
        '诸暨': [120.23, 29.71],
        '郑州': [113.65, 34.76],
        '哈尔滨': [126.63, 45.75],
        '聊城': [115.97, 36.45],
        '芜湖': [118.38, 31.33],
        '唐山': [118.02, 39.63],
        '平顶山': [113.29, 33.75],
        '邢台': [114.48, 37.05],
        '德州': [116.29, 37.45],
        '济宁': [116.59, 35.38],
        '荆州': [112.239741, 30.335165],
        '宜昌': [111.3, 30.7],
        '义乌': [120.06, 29.32],
        '丽水': [119.92, 28.45],
        '洛阳': [112.44, 34.7],
        '秦皇岛': [119.57, 39.95],
        '株洲': [113.16, 27.83],
        '石家庄': [114.48, 38.03],
        '莱芜': [117.67, 36.19],
        '常德': [111.69, 29.05],
        '保定': [115.48, 38.85],
        '湘潭': [112.91, 27.87],
        '金华': [119.64, 29.12],
        '岳阳': [113.09, 29.37],
        '长沙': [113, 28.21],
        '衢州': [118.88, 28.97],
        '廊坊': [116.7, 39.53],
        '菏泽': [115.480656, 35.23375],
        '合肥': [117.27, 31.86],
        '武汉': [114.31, 30.52],
        '大庆': [125.03, 46.58]
      } */
      let seriesData = []
      for (let i = 0; i < chartData.length; i++) {
        if (chartData[i].name === 'ZZ') {
          let val = chartData[i].total
          seriesData.push({ name: 'ZZ', value: [113.65, 34.76, val] })
        }
        if (chartData[i].name === 'DL') {
          let val = chartData[i].total
          seriesData.push({ name: 'DL', value: [121.62, 38.92, val] })
        }
        if (chartData[i].name === 'XX') {
          let val = chartData[i].total
          seriesData.push({ name: 'XX', value: [114.31, 30.52, val] })
        }
        if (chartData[i].name === 'HD1') {
          let val = chartData[i].total
          seriesData.push({ name: 'HD1', value: [113.23, 23.16, val] })
        }
        if (chartData[i].name === 'HD2') {
          let val = chartData[i].total
          seriesData.push({ name: 'HD2', value: [113.85, 23.88, val] })
        }
      }
      /* var myData = [{ name: '郑州', value: [113.65, 34.76, 90] }, { name: '大连', value: [121.62, 38.92, 120] }, { name: '襄阳', value: [114.31, 30.52, 142] }, { name: '广州', value: [113.23, 23.16, 123] }] */
      var option = {
        title: {
          text: '中国区域',
          subtext: 'xxxxxxxx',
          sublink: 'xxxxxxxxxxxxx'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return '工厂：' + params.name
          }
        },
        geo: {
          map: 'china',
          itemStyle: { // 定义样式
            normal: { // 普通状态下的样式
              areaColor: '#f44336', // '#323c48', // '#f44336',
              borderColor: '#111'
            },
            emphasis: { // 高亮状态下的样式
              areaColor: '#f44336' // '#fdd835' // '#2a333d'
            }
          }
        },
        series: [{
          name: '销量',
          type: 'scatter', // 散点图
          itemStyle: {
            normal: {
              opacity: 0.8,
              color: '#169fe6'
            }
          },
          coordinateSystem: 'geo',
          data: seriesData // series数据内容
        }]
      }
      if (!self.mapChart) {
        self.mapChart = self.$echarts.init(document.getElementById('idMapWrap'))
      }
      self.mapChart.setOption(option)
      self.mapChart.hideLoading()
      self.mapChart.on('click', function (params) {
        if (params.value) {
          self.list(2, params.name)
          self.detailObj = {
            cssClass: 'secondShow',
            currentIndex: 2
          }
        }
      })
      // id
    },
    devClick: function () {},
    // 名字单击
    itemNameClick: function (index, name) {
      let self = this
      if (index === 2) {
        // 工厂列表
        self.detailObj = {
          cssClass: 'secondShow',
          currentIndex: 2
        }
        self.list(2, name)
      }
      if (index === 3) {
        // 车间列表
        self.detailObj = {
          cssClass: 'thirdShow',
          currentIndex: 3
        }
        console.info('index===3')
        self.showDev = !self.showDev
      }
      if (index === 4) {}
    },
    // 车间单击
    workshopClick: function () {
      let self = this
      self.detailObj = {
        cssClass: 'thirdShow',
        currentIndex: 3
      }
    },
    // 返回
    backClick: function (index) {
      let self = this
      if (index === 2) {
        self.detailObj = {
          cssClass: 'firstShow',
          currentIndex: 1
        }
        self.list(1, '')
      }
      if (index === 3) {
        self.detailObj = {
          cssClass: 'secondShow',
          currentIndex: 2
        }
      }
      // if (index === 4) {
      //   self.detailObj = {
      //     cssClass: 'devShow',
      //     currentIndex: 2
      //   }
      // }
    },
    // 数据list
    list: function (level, factory) {
      let self = this
      let postData = {
        level: level, // 级别（1--总公司，2--工厂）
        factory: factory // 进入的工厂--工厂名称
      }
      self.factoryData = []
      window.myapi.security_dev_sums(postData).then(function (res) {
        if (res.data.status === 200) {
          if (level === 1) {
            self.factoryData = res.data.data.datas
            self.oneEchartInit(res.data.data.datas)
          } else {
            self.workshopData = res.data.data.datas
          }
          self.statisticOnOff(res.data.data)
        } else {
          let msg = res.data.msg ? res.data.msg : '请求数据失败!'
          self.$Message.error(msg)
        }
      }).catch(function (e) {
        self.$Message.error('请求数据失败!')
      })
    },
    // 计算统计
    statisticOnOff: function (obj) {
      let self = this
      self.showStatisticObj.total = obj.total
      let len = obj.datas.length
      let onlines = 0
      let offlines = 0
      for (let i = 0; i < len; i++) {
        onlines += obj.datas[i].onlines
        offlines += obj.datas[i].offlines
      }
      self.showStatisticObj.onlines = onlines
      self.showStatisticObj.offlines = offlines
    },
    // 大数字 千分位显示
    numberShow: function (number) {
      if (number) {
        return (number).toLocaleString('en-US')
      } else {
        return number
      }
    }
  }
}

</script>
